<template>
  <div class="search-suggestion">
    <van-cell v-for="(item,index) in suggestions"  :key="index" icon="search" @click="$emit('search',item)">
      <div slot="title" v-html="highlight(item)"></div>
    </van-cell>
  </div>
</template>
<script>
import { GetSearchSuggestion } from '@/api/search';
import { debounce } from "lodash"  // 导入防抖函数， 这个包是按需加载
// 文档地址：https://www.lodashjs.com/
export default {
    data(){
        return{ 
          suggestions:[]  // 搜索建议
         }
    },
    props:{
      searchText:{
        type:String,
        required:true
      }
    },
    watch:{
      searchText:{
        // 当searchText发生改变的时候回触发函数
        immediate:true,  // 第一次触发
        // handler:function(newval){
        //   this.loadSearchSuggestion(newval)
        // } 
        // debounce函数
          // 参数1：1个函数
          // 参数2：延迟时间，单位是毫秒
          // 返回值：防抖函数
        handler:debounce(function(val){
          this.loadSearchSuggestion(val)
        },1000)  // 一秒钟之后才会调用函数。防抖函数
      }
    },
    methods:{
      async loadSearchSuggestion(newval){
        let { data:res } = await GetSearchSuggestion(newval);
           console.log(res);
           this.suggestions = res.data.options;
      },
      // 高亮文字
      highlight(text){
        const highlightStr = `<span class="active">${this.searchText}</span>`;
        // 正则表达式//中间的内容都会作为匹配字符使用，而不是数据变量
        // 如果需要根据数据变量动态创建正则，则手动new正则表达式
        const reg = new RegExp(this.searchText,'gi')
        return text.replace(reg,highlightStr)
      }
    },
    components:{}
}
</script>
<style scoped lang="less">
/deep/ .active{
  color: red;
}
</style>